<template>
	<view>
		<u-card padding="16" v-for="(item,index) in dataList" :key="index">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-4 weikaishi2 jinxingzhong" v-if="item.tstate == '未回传'">
								<span>{{item.tstate}}</span>
							</view>
							<view class="u-line-1 u-m-t-4 weikaishi2 yiwancheng" v-if="item.tstate == '已回传'">
								<span>{{item.tstate}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class=" u-m-t-4 weikaishi">
								<span>{{item.getUnit}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class=" u-m-t-4 weikaishi4 apply-view">
								<span>地址：{{item.getLocation}}</span>
                <u-button
                    class="apply-button"
                    size="mini" type="warning" :plain="true"
                    @click="deleteFile(item.id)"
                    v-if="item.tstate == '已回传'">
                  重新上传
                </u-button>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<view class="wrap">
					<u-row>
						<u-col span="12" text-align="center" v-if="item.tstate == '未回传'">
							<view style="height: 600rpx;" class="u-line-1 u-m-t-10" @click="uploadimg(item.id)">
								<u-image width="600rpx" height="600rpx" src="https://z3.ax1x.com/2021/08/03/ficppn.png"></u-image>
							</view>
						</u-col>
						<u-col span="12" text-align="center" v-if="item.tstate == '已回传'">
							<view style="height: 600rpx;" class="u-line-1 u-m-t-10" @click="viewImage(item.fileId)">
								<u-image width="600rpx" height="600rpx" :src="imgs(item.fileId)"></u-image>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="4" text-align="center">
							<view class=" u-m-t-10">
								<span>回传人:{{item.username}}</span>
							</view>
						</u-col>
						<u-col span="8" text-align="center">
							<view class=" u-m-t-10">
								<span>时间:{{item.time}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="foot-butten" slot="foot" v-if="type == '1'">
				<view :class="flex">
					<!-- <u-col span="6" text-align="center" v-if="item.tstate == '未回传'">
						<view class="u-m-10 u-border-right" @click="qianshou(item.id)">
							签收
						</view>
					</u-col> -->
					<u-col span="12" text-align="center" v-if="item.tstate == '未回传'">
						<view  class="u-m-10 " @click="qianshoubingshangchuan(item.id)" >
							签收并上传
						</view>
					</u-col>
				</view>
			</view>
		</u-card>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import config from '../../../config.js'
	export default {
		data() {
			return {
				dataList:[],
				dispatchNumber:'',
				imgList: [],
				type:'1',

				flex:'',
			}
		},
		onLoad(open) {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			this.type = open.type
			this.$http.post('/rest/transportCar/transportReceipt',{
			},{
				params: {
					dispatchNumber:open.dispatchNumber
				},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				this.dataList = res.data.data
			})
			this.dispatchNumber = open.dispatchNumber
		},
		computed:{
		},
		methods: {
			qianshoubingshangchuan(id){
				uni.chooseImage({
					count: 1, //默认9
					// sourceType: ['camera'],
					success: res1 => {
						var that = this
						uni.getLocation({
							type:'gcj02',
							altitude:false,
							success: function (res) {
								const latitude = res.latitude;
								const longitude = res.longitude;
								uni.request({
									method:"POST",
									header:{
										'Authorization' :uni.getStorageSync('token'),
									},
									url: config.root +'/rest/transportCar/editqianshoujiaoyan?id='+id+'&longitude='+longitude+'&latitude='+latitude,
									data:{
									},
									success: (res) => {
										if(res.data.code == 200) {
											uni.uploadFile({
												url: config.root + 'rest/transportCar/uploads', // 文件上传路径
												filePath: res1.tempFilePaths[0],
												name: 'file',
												header: {
													'Authorization' :uni.getStorageSync('token'),
												},
												formData: {
													id:id
												},
												success: res => {
													let data = JSON.parse(res.data);
													if(data.code == 200) {
														uni.showToast({
															title: '上传成功',
															duration: 2000
														});
														setTimeout(() => {
															that.refresh()
														}, 600)
													} else {
														uni.showToast({
															title: data.message,
															duration: 2000,
															icon:'none',
														});
													}
												}
											})
										} else {
											uni.showToast({
												title: '您所在位置不在收货范围内，无法签收',
												duration: 2000,
												icon:'none',
											});
										}
									}
								})
							},
							fail:function(res){
								uni.showToast({
									title: '获取定位信息失败，请重试',
									duration: 2000,
									icon:'none',
								});
							},
						})
					}
				})
			},
			qianshou(id){
				uni.showModal({
					content: '确定签收吗？',
					success: (res) => {
						if (res.confirm) {
							var that = this
							uni.getLocation({
								type:'gcj02',
								altitude:false,
								success: function (res) {
									const latitude = res.latitude;
									const longitude = res.longitude;
									uni.request({
										method:"POST",
										header:{
											'Authorization' :uni.getStorageSync('token'),
										},
										url: config.root +'/rest/transportCar/editqianshoujiaoyan?id='+id+'&longitude='+longitude+'&latitude='+latitude,
										data:{
										},
										success: (res) => {
											if(res.data.code == 200) {
												uni.request({
													method:"POST",
													header:{
														'Authorization' :uni.getStorageSync('token'),
													},
													url: config.root +'/rest/transportCar/uploadsqs?id='+id,
													data:{
													},
													success: (res) => {
														if(res.data.code == 200) {
															uni.showToast({
																title: '签收成功',
																duration: 2000
															});
															setTimeout(() => {
																that.refresh()
															}, 500)
														} else {
															uni.showToast({
																title: res.data.message,
																duration: 2000,
																icon:'none',
															});
															setTimeout(() => {
																that.refresh()
															}, 500)
														}
													}
												})
											} else {
												uni.showToast({
													title: '您所在位置不在收货范围内，无法签收',
													duration: 2000,
													icon:'none',
												});
											}
										}
									})
								},
								fail:function(res){
									uni.showToast({
										title: '获取定位信息失败，请重试',
										duration: 2000,
										icon:'none',
									});
								},
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			imgs(fileId){
				return config.root + 'system/previewa/' + fileId
			},
			viewImage(fileId) {
				let arr = []
				let img = config.root + 'system/previewa/' + fileId
				arr.push(img)
				uni.previewImage({
					urls: arr,
				});
			},
      // 删除图片
      deleteFile(id){
        const thatId = id;
        uni.request({
          method:"POST",
          header:{
            'Authorization' :uni.getStorageSync('token'),
          },
          url: config.root +'/rest/transportCar/deleteFile?id='+id,
          data:{
          },
          success: (res) => {
            const that = this
            if(res.data.code == 200) {
              uni.showToast({
                title: '请选择图片',
                duration: 2000
              });
              this.uploadimg(thatId);
            }
            setTimeout(() => {
              that.refresh()
            }, 600)
          },
          fail: function (err){
            console.log("删除失败"+err);
          }
        })
      },
      // 上传
			uploadimg(id){
				if(this.type == '1'){
					uni.chooseImage({
						count: 1, //默认9
						// sourceType: ['camera'],
						success: res1 => {
							var that = this
							uni.getLocation({
								type:'gcj02',
								altitude:false,
								success: function (res) {
									const latitude = res.latitude;
									const longitude = res.longitude;
									uni.request({
										method:"POST",
										header:{
											'Authorization' :uni.getStorageSync('token'),
										},
										url: config.root +'/rest/transportCar/editqianshoujiaoyan?id='+id+'&longitude='+longitude+'&latitude='+latitude,
										data:{
										},
										success: (res) => {
											if(res.data.code == 200) {
												uni.uploadFile({
													url: config.root + 'rest/transportCar/uploads', // 文件上传路径
													filePath: res1.tempFilePaths[0],
													name: 'file',
													header: {
														'Authorization' :uni.getStorageSync('token'),
													},
													formData: {
														id:id
													},
													success: res => {
														let data = JSON.parse(res.data);
														if(data.code == 200) {
															uni.showToast({
																title: '上传成功',
																duration: 2000
															});
															setTimeout(() => {
																that.refresh()
															}, 600)
														} else {
															uni.showToast({
																title: data.message,
																duration: 2000,
																icon:'none',
															});
														}
													}
												})
											} else {
												uni.showToast({
													title: '您所在位置不在收货范围内，无法签收',
													duration: 2000,
													icon:'none',
												});
											}
										}
									})
								},
								fail:function(res){
									uni.showToast({
										title: '获取定位信息失败，请重试',
										duration: 2000,
										icon:'none',
									});
								},
							})
						}
					})
				}
			},
			refresh(){
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post('/rest/transportCar/transportReceipt',{
				},{
					params: {
						dispatchNumber:this.dispatchNumber
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					this.dataList = res.data.data
				})
				uni.hideLoading()
			},
		}
	}
</script>


<style lang="scss">
.apply-view{
  position: relative;
}
.apply-button{
  position: absolute;
  right: 0;
}

	.u-body-item {
		padding: 20rpx 15rpx;
	}
	.wrap {
		padding: 0rpx 12rpx;
	}

	.u-row {
		margin: 10rpx 2rpx;
	}
	.weikaishi2{
		font-size: 34rpx;
	}
	.baise{
		color: #ffffff;
		font-size: 34rpx;
	}
	.weikaishi3{
		font-size: 30rpx;
	}
	.weikaishi4{
		color: #000000;
		font-size: 24rpx;
	}
	.weikaishi5{
		color: #19be6b;
		font-size: 22rpx;
	}
</style>
